<template>
  <b-container fluid style="font-size: 0.9rem;">
    <b-row>
      <b-col>
        <b-form-group horizontal style="width:50%;float:right">
          <b-input-group>
            <b-form-input v-model="filter" placeholder="Type to Search" />
            <b-input-group-append>
              <b-btn :disabled="!filter" @click="filter = ''">搜索</b-btn>
            </b-input-group-append>
          </b-input-group>
        </b-form-group>
      </b-col>
    </b-row>

    <!-- Main table element -->
    <b-table striped bordered fixed small outlined show-empty stacked="md" :items="items" :fields="fields" :current-page="1" :per-page="perPage">
      <template slot="operation" slot-scope="row">
        <b-btn variant="outline-primary" style="margin-right:5px;padding:5px;font-size:0.7rem" @click="onNetModel(row)">查询详情</b-btn>
      </template>
    </b-table>

    <div style="margin-left: 0px;">
      <div class="pages-number" style="display:flex;float:left">
        <span style="height: 20px;margin-top: 7px;margin-right: 5px;">显示第 1 到第 {{perPage}} 条记录，总共 {{totalRows}} 条记录每页显示</span>
        <b-form-group>
          <b-form-select :options="pageOptions" v-model="perPage" />
        </b-form-group>
        <span style="height: 20px;margin-top: 7px;margin-left:5px">条记录</span>
      </div>
      <b-pagination style="float: right;" @input="getData" :total-rows="totalRows" :per-page="perPage" v-model="currentPage" />
    </div>
  </b-container>
</template>

<script>
import {
  baseURL,
  get,
  save,
  associate,
  getAndAssociate,
  remove
} from "src/service/api";
import NetWorkInfoModal from "./NetWorkInfoModal.vue";
// 网元表
// 表格：功能有过滤,排序，limit等功能默认都是未开启的
export default {
  name: "NetTable",
  props: ["work"],
  components: {
    NetWorkInfoModal
  },
  data() {
    return {
      netWorkInfoModalItem: {
        description: "1",
        id: "1",
        in: [],
        name: "1",
        out: []
      },
      fields: [
        {
          key: "name",
          label: "网元能力名称",
          sortable: true,
          sortDirection: "desc"
        },
        {
          key: "description",
          label: "描述",
          sortable: true,
          class: "text-center"
        },
        { key: "operation", label: "操作" }
      ],
      currentPage: 1,
      perPage: 5,
      totalRows: 0,
      pageOptions: [5, 10, 15],
      filter: null,
      items: []
    };
  },
  watch: {
    work: function() {
      console.log("更新");
      let self = this;
      get(
        "workings/search/work?work=" +
          this.work +
          "&size=" +
          this.perPage +
          "&page=" +
          (this.currentPage - 1)
      )
        .then(function(response) {
          if (response.status == "200") {
            console.log("资源获取成功");
            self.items = response.data._embedded.workings;
            self.totalRows = response.data.page.totalElements;
          }
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  computed: {
    sortOptions() {
      // Create an options list from our fields
      return this.fields.filter(f => f.sortable).map(f => {
        return { text: f.label, value: f.key };
      });
    }
  },
  methods: {
    info(item, index, button) {
      this.modalInfo.title = `Row index: ${index}`;
      this.modalInfo.content = JSON.stringify(item, null, 2);
      this.$root.$emit("bv::show::modal", "modalInfo", button);
    },
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    onNetModel(row) {
      this.$emit("netModelShow", row);
    },
    onNetWorkArchiveModal() {
      this.$emit("netWorkArchiveModalShow");
    },
    getData() {
      console.log("更新");
      let self = this;
      get(
        "workings/search/work?work=" +
          this.work +
          "&size=" +
          this.perPage +
          "&page=" +
          (this.currentPage - 1)
      )
        .then(function(response) {
          if (response.status == "200") {
            console.log("资源获取成功");
            self.items = response.data._embedded.workings;
            self.totalRows = response.data.page.totalElements;
          }
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss">
.table th,
.table td {
  vertical-align: middle;
}
.custom-select {
  width: 60px;
  float: left;
}
</style>
